<template>
  <a-modal
    v-model:open="state.dialog.isShowDialog"
    :title="state.dialog.title"
    @ok="handleSubmit"
    @cancel="handleReset"
    :width="620"
    centered
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <!-- 数据库类型选择 -->
      <a-form-item label="数据库类型" name="dbType" required>
        <a-select
          v-model:value="formState.dbType"
          placeholder="请选择数据库类型"
        >
          <a-select-option value="mysql">MySQL</a-select-option>
          <!-- 可扩展其他数据库类型 -->
        </a-select>
      </a-form-item>

      <!-- MySQL专属字段 -->
      <template v-if="formState.dbType === 'mysql'">
        <a-form-item label="主机地址" name="host" required>
          <a-input
            v-model:value="formState.host"
            placeholder="例如：127.0.0.1"
          />
        </a-form-item>

        <a-form-item label="端口号" name="port" required>
          <a-input-number
            v-model:value="formState.port"
            :min="1"
            :max="65535"
            class="w-full"
          />
        </a-form-item>

        <a-form-item label="用户名" name="user" required>
          <a-input v-model:value="formState.user" />
        </a-form-item>

        <a-form-item label="数据库名" name="database" required>
          <a-input v-model:value="formState.database" />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item label="驱动类" name="driver">
          <a-input
            v-model:value="formState.driver"
            placeholder="例如：com.mysql.cj.jdbc.Driver"
          />
        </a-form-item>
      </template>
      <a-form-item label="描述" name="desc">
        <a-textarea
          v-model:value="formState.desc"
          placeholder="请输入描述信息"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive, defineAsyncComponent } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { FormState } from '@/types/data';

  const emit = defineEmits(['refresh']);

  const formRef = ref();

  const state = reactive({
    dialog: {
      isShowDialog: false,
      title: '新增数据源',
    },
  });
  const formState = reactive<FormState>({});

  // 验证规则[7](@ref)
  const rules: Record<string, Rule[]> = {
    dbType: [{ required: true, message: '请选择数据库类型' }],
    host: [
      { required: true, message: '请输入主机地址' },
      { pattern: /^(\d+\.){3}\d+$/, message: '请输入有效IP地址' },
    ],
    port: [
      { required: true, message: '请输入端口号' },
      { type: 'number', min: 1, max: 65535, message: '端口范围1-65535' },
    ],
    user: [{ required: true, message: '请输入用户名' }],
    database: [{ required: true, message: '请输入数据库名' }],
    driver: [{ pattern: /^[a-z0-9.]+$/i, message: '只允许字母、数字和点号' }],
  };

  const openDialog = () => {
    state.dialog.isShowDialog = true;
  };

  // 提交处理[5](@ref)
  const handleSubmit = async () => {
    try {
      await formRef.value.validate();
      console.log('提交数据:', formState);
      // 调用API接口提交数据
      state.dialog.isShowDialog = false;
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 重置表单
  const handleReset = () => {
    formRef.value.resetFields();
    state.dialog.isShowDialog = false;
  };
  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 10px;
  }
</style>
